
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View, } from '@tarojs/components';
import { DropdownItem, DropdownMenu, Button } from '@antmjs/vantui';
import './index.scss'

// PdsField 需要的参数
interface PdsDropMenuProps extends BaseComponentProps {
  /**
   * data 有数据情况是一个二维数组
   */
  data: any[],
  title: string,
  /**
   * 设置这个需要一个data item  select_option 需要有值
   */
  needOne: boolean
  onChange: Function,
}

interface PdsDropMenuState {
  title: string,
  data: any[],
  isClickButton: boolean,//  是否点击了按钮
}


/**
 * option_name
 * option_value
 * name
 */
class PdsDropMenu extends Component<PdsDropMenuProps, PdsDropMenuState> {

  config = {
    navigationBarTitleText: ''
  }

  // 建议在页面初始化时把 getCurrentInstance() 的结果保存下来供后面使用，
  // 而不是频繁地调用此 API
  $instance = getCurrentInstance()

  state = {
    title: '',
    data: [],
    selectData: [],
    isClickButton: false,//  是否点击了按钮
  }

  /**
   * 设置props 默认值
   */
  static defaultProps = {
    needOne: false,
  };

  constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.setState({ title: props.title, data: props.data })
  }

  componentWillMount() {
    console.log(this.props.needOne)
    this.setState({ title: this.props.title, data: this.props.data })
  }

  componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
      // 当某个特定的prop值发生变化时执行逻辑
      this.setState({ title: this.props.title, data: this.props.data })
    }
  }

  componentDidMount() { }
  componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }

  close() {
    const { isClickButton, data } = this.state
    const { onChange } = this.props
    if (isClickButton) {
      onChange(data)
    } else {
      this.setState({ data: this.props.data })
    }
  }

  reset() {
    const { data } = this.state
    for (let index = 0; index < data.length; index++) {
      const element = data[index];
      element['select_option'] = undefined
    }
    this.setState({ isClickButton: true })

    //获取传递的 map 对象
    if (this.myRef !== null) {
      this.myRef.current!.toggle()
    }
  }

  sure() {
    //获取传递的 map 对象
    this.setState({ isClickButton: true })
    if (this.myRef !== null) {
      this.myRef.current!.toggle()
    }
  }

  /**
   * 点击选项
   * item 这个分类
   * option_item 选项
   */
  clickOptionItem(item, item_index, option_item) {
    if (!this.props.needOne && item['select_option'] !== undefined && option_item['option_value'] === item['select_option']['option_value']) {
      item['select_option'] = undefined
    } else {
      item['select_option'] = option_item

    }
    const { data } = this.state
    var tempData: any[] = Array.from(data)
    tempData[item_index] = item
    this.setState({ data: tempData })

  }

  render() {
    const { title, data } = this.state
    var select_option_num = 0
    for (let index = 0; index < data.length; index++) {
      const element = data[index];
      if (element['select_option'] !== undefined && element['select_option']['option_name'] !== '不限') {
        select_option_num++
      }
    }

    return (
      <View className='pds-drop-menu'>
        <DropdownMenu direction='down'>
          <DropdownItem title={`${title}${select_option_num > 0 ? `(${select_option_num})` : ''}`} titleClass={select_option_num > 0 ? 'item-option-item-title-select' : ''} ref={this.myRef} onClose={this.close.bind(this)}  >
            <View className='menu-content'>
              <View className='item-content'>
                {
                  Array.from(data).map((item, item_index) => {
                    var options: any[] = [];
                    if (item['options']) {
                      options = item['options'];
                    }
                    // console.log(item['select_option'])
                    return <View className='item' key={item_index}>
                      {
                        Array.from(data).length > 1 ? <View className='item-title'>{item['name']}</View> : null
                      }
                      <View className='item-option'>
                        {
                          options.map((option_item, option_index) => {
                            // console.log(option_item)
                            return <Button key={option_index} className={`item-option-item ${item['select_option'] && option_item['option_value'] === item['select_option']['option_value'] ?
                              'item-option-item-select' : ''}`} onClick={() => {
                                this.clickOptionItem(item, item_index, option_item)
                              }}
                            >{option_item['option_name']}</Button>
                          })
                        }
                      </View>
                    </View>
                  })

                }
              </View>
              <View className='bottom'>
                <Button className='button reset-button' onClick={this.reset.bind(this)}>重置</Button>
                <Button className='button sure-button' onClick={this.sure.bind(this)}>确定</Button>
              </View>
            </View>

          </DropdownItem>
        </DropdownMenu>
      </View>
    );
  }
}
export default PdsDropMenu;
